<template>
  <app-page title="消息通知" class="message_page" fill style="background-color: #f5f5f5">
    <!-- <app-tab v-model="level" :tabs="tabs" @change="pageActions.handleSearch" /> -->
    <Tabs :tabs="tabs" :activetab="activetab" @change="changectivetab" />
    <div style="height: calc( 100% - 96px )">
      <el-table :data="pageData.list" v-loading="pageData.loading" height="100%" @row-click="clickcheck">
        <el-table-column label="类型" prop="level" width="230px">
          <template #default="{ row }">
            <div class="level">
              {{ tabsmap[row.type] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="内容" prop="message">
          <template #default="{ row }">
            <div style="display: flex">
              <div>{{ row.message }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="created_at" width="200px" />
      </el-table>
    </div>

    <div class="message_pagination" style="height: 48px">
      <el-pagination @size-change="pageActions.handleSizeChange" @current-change="pageActions.handlePageChange"
        v-model:current-page="pageData.page" v-model:page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pageData.total" background />
    </div>
  </app-page>
</template>
<script setup>
import { http } from '@/utils/http'
import Tabs from "./Tabs.vue";

const activetab = ref('all')

const tabs = [
  { label: '全部', value: 'all' },
  { label: '会员', value: 'member' },
  { label: '订单', value: 'order' },
  { label: '代理IP', value: 'proxy_ip' }
]

const tabsmap = ref({
  member: '会员',
  order: '订单',
  proxy_ip: '代理IP'
})

const { pageData, pageActions, dialog } = usePage(
  () => {
    const query = {
      page: pageData.page,
      page_size: pageData.pageSize,
      ...pageData.query,
    }

    if (activetab.value != 'all') query.type = activetab.value

    // return http
    //   .get('/log/list', {
    //     params: query,
    //   })
    //   .then(res => {
    //     console.log(res);

    //     // pageData.list = res.data
    //     // pageData.total = res.data.total
    //   })
    return http.get('/log/list', {
      params: query,
    })
  },
  {
    query: {},
  }
)

const changectivetab = (value) => {
  activetab.value = value
  pageActions.refresh(true)
}

const clickcheck = row => {
  console.log(row.id)
  http.get(`/message/read?id=${row.id}`).then(res => {
    if (res.code == 200) {
      row.check_status = 1
      // pageActions.refresh(true)
    }
  })
}
</script>
<style lang="scss" scoped>
.level {
  display: flex;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  margin-right: 12px;
  border-radius: 100%;
}

:deep(.app-list) {
  border-radius: 0 0 16px 16px;
}

.nodu {
  width: 32px;
  height: 20px;
  padding: 0 2px;
  border-radius: 4px;
  background-color: #47acff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.yidu {
  width: 32px;
  height: 20px;
  padding: 0 2px;
  border-radius: 4px;
  background-color: #b7bdc6;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.message_pagination {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>


<style>
.message_page .main {
  padding: 16px;
  background: #fff;
}
</style>